<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <link rel="stylesheet" href="js/bootstrap/css/bootstrap.css">
    <link rel="stylesheet" href="js/bootstrap/css/bootstrap-theme.css">
    <!--<link rel="stylesheet" href="css/data_operation.css">-->
    <script src="js/jquery.js"></script>
    <script src="js/bootstrap/js/bootstrap.js"></script>
    <script src="js/eventHandler.js"></script>
    <script src="js/funcs.js"></script>
    <script src="js/dragHandler.js"></script>
    <script src="js/dataHandler.js"></script>
    <style>
        html{
            height: 100%;
        }
        body{
            min-height: 100%
        }
        .toolBox{
            position: absolute;
        }

        #toolBox{
            position: fixed;
            left: 20px;
            top: 400px;
            border: 1px solid black;
            /*width: 132px;*/
            overflow: hidden;
            padding: 10px;
            border-radius: 6px;
            width: 25px;
            height: 25px;
            z-index: 999999998;
            background: white;
            font-size: 0;
            transition: 0.3s ease;
            transition-property: width, height;
        }
        #toolBox.spreaded{
            width: 125px;
            height: 222px;
            /*height: auto;*/
        }
        #toolBox .item{
            display: inline-block;
            width: 40px;
            height: 40px;
            margin: 5px;
            cursor: pointer;
            text-align: center;
            border: 1px solid gray;
            -webkit-user-select: none;
            -moz-user-select: none;
            -ms-user-select: none;
        }
        #toolBox .spread{
            display: block;
            font-size:24px;
            cursor: pointer;
            position: absolute;
            line-height: 24px;
            width: 24px;
            height: 24px;
            text-align: center;
            right: 0;
            top: 0;
            transition: 0.4s ease;
            transition-property: transform, left;
            -webkit-user-select: none;
            -moz-user-select: none;
            -ms-user-select: none;
        }
        #toolBox.spreaded .spread{
            transform: rotate(135deg);
        }
        #data_operation{
            position: fixed;
            top: 0;
            width:  100%;
        }
        #data_operation .pops > *{
            visibility: hidden;
        }
        #data_operation .pops > *.visible{
            visibility: visible;
        }
        .container div{
            /*border: 1px solid black;*/
            /*margin: 5px;*/
        }
    </style>

    <style>
        .container{
            /*border: 1px solid red;*/
            padding: 0;
            border: 1px solid black;
        }
        .row{
            /*border: 1px solid orange;*/
            margin: 0;
        }
        *[class|=col]{
            /*border: 1px solid green;*/
            padding: 0;
            background: white;
            min-height: 100px;
            height: 100%;
        }
        #mouse_follower{

            width: 100px;
            height: 100px;

            position: absolute;
            transition: 0.15s ease;
            transition-property: transform, visibility;
            transform: scale(0);
            visibility: hidden;
            z-index: 9999999999;
            opacity: 0.8;
            overflow: hidden;
        }
        #mouse_follower.show{
            transform: scale(1);
            visibility: visible;
        }

        body, body *{
            -webkit-user-select: none;
            -moz-user-select: none;
            -ms-user-select: none;
        }
		#help{
			position: absolute;
			right: 0;
			bottom: 0;
			z-index: -1;
			width: 300px;
			text-indent: 2em;
			color: #666;
		}
    </style>
</head>
<body>


<div id="main">
    <div id="mouse_follower"></div>
	<div id="help">拖动左下角组件板上的组件到页面中部构建区域实现构建。在拖动过程中，虚线框表示选中的区域，实线表示选中的方向，鼠标释放后会将拖动的组件插入到虚线框区域的实线所在方向，如为实线框则插入到目标区域内部。在多个区域边界重叠的情况下，将鼠标移动到靠近边界的位置，会逐渐选中更外层的区域。构建完成后，点击save html按钮即可获得构建的页面的源代码（须在源码中引入bootstrap）。</div>
	

    <div id="data_operation">
        <button class="display">show data</button>
        <button class="parse">parse data</button>
        <button class="save">save html</button>
        <button class="clear">clear</button>

        <div class="pops">
            <div class="parse_panel">
                <button class="parse">parse</button>
                <button class="choose_file">choose file</button>
                <input type="file" class="file"/>
                <textarea></textarea>
            </div>
        </div>
        <script>
            (function(){
                var pops = $("#pops");

                (function(){
                    var parse_panel = pops.find(".parse_panel");
                    var file = parse_panel.find("input.file");
                    var textarea = parse_panel.find('textarea');
                    parse_panel.find("button.choose_file").click(function(){
                        file.click();
                    });
                    parse_panel.find("button.parse").click(function(){
                        parse_panel.css({

                        });
                    });
                    file.on("change", function(){
                        var fr = new FileReader();
                        fr.onload = function(data){
                            textarea.html(data);
                        };
                        fr.readAsText(this.files[0]);
                    });
                })();
            })();
        </script>
    </div>

    <div id="toolBox" class="spreaded">
        <div class="spread" >+</div>
        <div class="tools">
            <span class="item" data-selector="body" data-name="layout"></span>
            <span class="item" data-selector=".container" data-name="row"></span>
            <span class="item" data-selector=".row, *[class|=col]" data-name="ctl" data-ctlName="login"></span>
            <span class="item" data-selector=".row, *[class|=col]" data-name="ctl" data-ctlName="swipper"></span>
            <span class="item" data-selector=".row, *[class|=col]" data-name="ctl" data-ctlName=""></span>
            <span class="item" data-selector=".row, *[class|=col]" data-name="ctl" data-ctlName=""></span>
            <span class="item" data-selector=".row, *[class|=col]" data-name="ctl" data-ctlName=""></span>
            <span class="item" data-selector=".row, *[class|=col]" data-name="ctl" data-ctlName=""></span>
        </div>
    </div>

    <hr/>


    <div id="content_area">
        <div class="container">
            <div class="row">
                <div class="col-xs-12"></div>
            </div>
        </div>
    </div>

</div>

<script>
    $(function(){

        var controls = {
            login: `
<div class="ctl ctl_login" >
    <p><input type="text" name="userName" placeholder="用户名"/></p>
    <p><input type="password" name="password" placeholder="密码"/></p>
    <p><button class="submit">登录</button><button class="cancel">取消</button></p>
</div>
<style>
    .ctl_login{
        text-align: center;
    }
    .ctl_login button{
        margin: 0 20px;
    }
</style>
            `,
            swipper: `
<div class="ctl ctl_swipper" style="height: 200px;">
    <div class="wrapper">
        <span class="item">
            <img src="" style="background: red"/>
        </span>
        <span class="item">
            <img src="" style="background: orange"/>
        </span>
        <span class="item">
            <img src="" style="background: lightblue"/>
        </span>
    </div>
</div>
<style>
    .ctl_swipper{
        width: 100%;
        overflow: hidden;
    }
    .ctl_swipper .wrapper{
        height: 100%;
        width: 100%;
        white-space: nowrap;
        font-size: 0;
    }
    .ctl_swipper .wrapper .item{
        display: inline-block;
        width: 100%;
        height: 100%;
    }
    .ctl_swipper .wrapper .item img{
        width: 100%;
        height: 100%;
    }
</style>
<script>
    var ctl_swipper = $(".ctl_swipper");
    ctl_swipper.find(".wrapper").each(function(){
        var wrapper = this;
        var index = 0;
        var num = $(this).children(".item").length;
        if(num > 1)
        setInterval(function(){
            if(++index >= num)
                index = 0;
            $(wrapper).animate({
                "margin-left": -100 * index + "%"
            });
        }, 3000);
    });
<${''}/script>
            `
        };

        var toolBox = $("#toolBox");
        toolBox.find(".spread").on("click", function(){
            toolBox.toggleClass("spreaded");
        });

        var insertElement = $("<div />").css({
            height: "100px",
            background: "orange"
        }).addClass("ctl");
        var mouse_follower = $("#mouse_follower");

        isun.drag(toolBox, "toolBox");

        $(document.body)
            .$init("mouse_follower")
            .$on("mousemove", follower_move, "mouse_follower")
            .$on("mouseup", follower_up, "mouse_follower");

        toolBox.find(".item").$add("tool").$on("mousedown", function(e){
            $e.clear("ctl", true);
            $e.disable("toolBox");

            var color = this.getAttribute("data-index");
            color = color == 0 ? "pink" : "#5" + (~~color).toString(16) + (16-~~color).toString(16);
            var insert = controls[this.getAttribute("data-ctlName")];
            var abbr = insertElement.clone().css("background-color", color)[0];
            if(insert){
                insert = $(insert);
            }else{
                insert = abbr;
            }

            mouse_follower.append(abbr).addClass("show");
            mouse_follower.css({
                left: e.pageX - mouse_follower[0].offsetWidth / 2 + "px",
                top: e.pageY - mouse_follower[0].offsetHeight / 2 + "px"
            });

            $e.statePush(null, "tool");
            $(document.body).$push("mouse_follower");

            if(this.getAttribute("data-name") === "layout")
                container_init(function(){});
            else
                container_init(function(){}, insert);

        }, "tool").each(function(i){
            this.style.backgroundColor = i === 0 ? "pink" : "#5" + i.toString(16) + (16-i).toString(16);
            this.setAttribute("data-index", i);
        });

        function follower_move(e){
            mouse_follower.css({
                left: e.pageX - mouse_follower[0].offsetWidth / 2 + "px",
                top: e.pageY - mouse_follower[0].offsetHeight / 2 + "px"
            });
        }
        function follower_up(e){
            $e.stateBack(1, "tool");
//            $e.stateBack("mouse_follower");
            $e.clear("mouse_follower");
            mouse_follower.html("").removeClass("show");
            $e.clear("", true);
            $e.clear("ctl", true);
            $(".ctl").$push("ctl").$on("mousedown", ctl_down, "ctl");
            $e.enable("toolBox");
        }

        ////////////////////
        //ctl
        /////
        var downPoint = [];
        var target;
        var targetParent;
        var targetPrev;
        function ctl_down(e){

            downPoint = [e.pageX, e.pageY];

            $(document.body).$push("ctl")
                .$on("mousemove", ctl_move1, "ctl")
                .$on("mouseup", ctl_up, "ctl");
            target = this;
        }
        function ctl_move1(e){
            if(Math.sqrt(Math.pow(downPoint[0] - e.pageX, 2) + Math.pow(downPoint[1] - e.pageY, 2)) > 35){
                $(document.body)
                    .$off("mousemove", "ctl")
                    .$on("mousemove", follower_move, "ctl");

                targetParent = $(target).parent("*[class|=col]");
                targetPrev = $(target).prev();
                mouse_follower.append(target).addClass("show");

                container_init(function(){}, target);
            }
        }
        function ctl_up(e){

            $e.stateBack("ctl");

            $e.clear("", true);
            mouse_follower.html("").removeClass("show");

            if(targetParent && targetParent.length)
            if($(target).parent().length){

            }else{
                if(targetPrev.length)
                    targetPrev.after(target);
                else
                    targetParent.prepend(target);
            }
            downPoint.length = 0;
            target = null;
            targetParent = null;
            targetPrev = null;
        }
        $(".ctl").$push("ctl").$on("mousedown", ctl_down, "ctl");


    });


    //btns
    (function(){

        var block = $("#data_operation");
        var content_area = $("#content_area");

        block.find(".display").click(function(){
            alert(isun.toJsonString(dragData.create($("#content_area").children())));
        });
        block.find(".parse").click(function(){
            var data = prompt("数据");
            if(data){
                var nodes = dragData.parse(data);
                content_area.append(nodes);
            }
        });
        block.find(".save").click(function(){

            var html = '<!DOCTYPE html><html><head><meta charset="UTF-8">' +
                '<script src="http://libs.baidu.com/jquery/1.11.3/jquery.min.js"></' + 'script>' +
                '<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" >' +
                '<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" >' +
                '<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" ></' + 'script>' +
                '</head><body>';

            html += content_area.html();
            html += '</body></html>';
            var blob = new Blob([html]);
            var aLink = document.createElement("a");
            aLink.download = "page.html";
            aLink.href = URL.createObjectURL(blob);
            aLink.style.display = "none";
            document.body.appendChild(aLink);
            aLink.click();
            document.body.removeChild(aLink);
        });
        block.find(".clear").click(function(){
            content_area.html("");
        });
    })();
</script>
</body>
</html>

